<template>
  <div id="app">
    <!-- App路由 -->
    <transition name="app" mode="out-in">
      <router-view />
    </transition>
    <tab-bar v-if="!this.$route.meta.hideTabBar"></tab-bar>
  </div>
</template>
<script>
import TabBar from "@/components/TabBar";
export default {
  name: "App",
  components: {
    TabBar,
  },
};
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
}
ul,
ul {
  list-style: none;
}
body {
  font: 14px/1.5 Tahoma, Helvetica, Arial, sans-serif;
  background-color: #e9e9e9;
}
a {
  text-decoration: none;
  color: #333;
}
.app-enter-active {
  animation: Animate 0.3s;
}
.app-leave-active {
  animation: Animate 0.3s reverse;
}

@keyframes Animate {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
</style>
